const path = require('path');
const { name } = require('./package');

function resolve(dir) {
  return path.join(__dirname, dir);
}

const port = 9002;

module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  filenameHashing: true,
  publicPath: 'http://localhost:9002/vue3/',
  devServer: {
    // contentBase: path.join(__dirname, 'dist'), 旧版 是用来指定被访问html页面所在目录的 , 只有在你想要提供静态文件时才需要
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    hot: true,
    // disableHostCheck: true,
    port,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  // 自定义webpack配置
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
            enforce: true,
            filename: 'vendors.[contenthash].js', // 确保chunk-vendors有独特的文件名
          },
        },
      },
    },
    output: {
      // 把子应用打包成 umd 库格式
      libraryTarget: 'umd',
      // filename: 'bundlevue2.js',
      library: 'vue3',
      filename: `[name].[contenthash].js`, // 主入口点的输出文件名
      chunkFilename: `[name].[contenthash].chunk.js`, // 分割出来的chunk的输出文件名
      chunkLoadingGlobal: `webpackJsonp_${name}`, // 旧版本为jsonpFunction
    },
  },
};

